<template>
    <div class="big">
        <div class="head">
            <div class="time">
                {{ dateYear }} {{ dateWeek }}
                <span>{{ dateDay }}</span>
            </div>
            <div>学工可视化大屏</div>
            <div class="exit" @click="notFull">
                <span>退出</span>
            </div>
        </div>
        <div class="echarts">
            <div class="left">
                <div class="echart">
                    <div class="echart-title">在校生数量</div>
                    <div id="stuNum"></div>
                </div>
                <div class="echart">
                    <div class="echart-title">优秀毕业生人数</div>
                    <div id="excellentGraduate"></div>
                </div>
                <div class="echart">
                    <div class="echart-title">各学院请假分布图</div>
                    <div id="collegeLeaveDistribution"></div>
                </div>
            </div>
            <div class="center">
                <div class="echart college">
                    <div class="echart-title">各学院学生数量</div>
                    <div class="college-list">
                        <div class="item" v-for="(v, i) in dept_count_list" :key="i">
                            <span>{{ v.deptName }}</span>
                            <span>{{ v.stuCount }}</span>
                        </div>
                    </div>
                </div>
                <div class="echart campus">
                    <div class="echart-title">学生入住分布图</div>
                    <div class="campus-list">
                        <div class="left">
                            <div v-for="(v, i) in park_count_list" :key="i">
                                <span>{{ v.campusName }}</span>
                                <span style="font-size: 12px; line-height: 12px;">{{ v.parkName }}</span>
                                <span class="total">{{ v.all }}个床位</span>
                            </div>
                        </div>
                        <div class="right">
                            <div v-for="(v, i) in park_count_list" :key="i">
                                <span>{{ v.parkName }}</span>
                                <div class="rate">
                                    <span>{{ v.allIn }}</span>
                                    <span>
                                        {{ isNaN(v.allIn / v.all) ? 0 : Math.round(v.allIn / v.all *
                                            10000) / 100 }}%
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="echart">
                    <div class="echart-title">学生处分分布图</div>
                    <div id="punishment"></div>
                </div>
                <div class="echart">
                    <div class="echart-title">评优评先申请分布图</div>
                    <div id="judgeBest"></div>
                </div>
                <div class="echart">
                    <div class="echart-title">静湖之星申请分布图</div>
                    <div id="lakeStar"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { nowTime } from '../../../utils/index.js';
import { countParkStu, countDeptGradeStu, countDeptStu, countGoodBiyeGradeStu, countGoodGradeStu, countLakeGradeStu } from "@/api/stuCQS/big";
import { isEmpty, groupBy } from "@/api/helpFunc";


export default {
    data() {
        return {
            timing: null,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            dept_count_list: [],

            park_count_list: []
        }
    },
    created() {
        this.countParkStu();
        this.countDeptStu();
    },
    mounted() {
        this.doFull();

        this.stuNumChart();
        this.excellentGraduateChart();
        this.collegeLeaveChart();
        this.punishmentChart();
        this.judgeBestChart();
        this.lakeStarChart();
        this.timeFn();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        clearInterval(this.timing)
    },
    methods: {
        async countParkStu() {
            let res = await countParkStu();
            if (res.code == 200) {
                this.park_count_list = [...res.data];
            }
        },

        async countDeptStu() {
            let res = await countDeptStu();
            if (res.code == 200) {
                this.dept_count_list = [...res.data];
            }
        },

        doFull() {
            this.$store.dispatch('app/toggleSideBarHide', true);
            document.querySelector('.navbar').style.display = "none";
            document.querySelector('.tags-view-container').style.display = "none";
        },
        notFull() {
            this.$store.dispatch('app/toggleSideBarHide', false);
            document.querySelector('.navbar').style.display = "block";
            document.querySelector('.tags-view-container').style.display = "block";
        },
        createChart(chartId, option) {
            const chart = this.$echarts.init(document.getElementById(chartId));
            chart.setOption(option);
        },
        getRandomColor() {
            // 生成随机的红色、绿色、蓝色值（0-255）
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);

            // 将颜色值转换为十六进制字符串
            const hexR = r.toString(16).padStart(2, '0');
            const hexG = g.toString(16).padStart(2, '0');
            const hexB = b.toString(16).padStart(2, '0');

            // 返回合成的十六进制颜色字符串
            return `#${hexR}${hexG}${hexB}`;
        },
        async stuNumChart() {
            let grade_list = [];
            let dept_list = [];
            let v_list = [];
            let res = await countDeptGradeStu();
            if (res.code == 200) {
                let data = [...res.data];
                let temp1 = groupBy(data, x => x.deptName);
                let temp2 = groupBy(data, y => y.gradeName);

                for (let key in temp1) {
                    dept_list.push(key.replace("\"", '').replace('"', ''));
                }

                for (let key in temp2) {
                    grade_list.push(key.replace("\"", '').replace('"', ''));
                }

                grade_list.map(y => {

                    let temp = {
                        name: y,
                        type: 'bar',
                        stack: 'total',
                        color: this.getRandomColor(),
                        data: []
                    };

                    dept_list.map(x => {

                        let v_data = data.filter(z => z.gradeName == y && z.deptName == x);

                        if (!isEmpty(v_data)) {
                            temp.data.push(v_data[0].stuCount);
                        } else {
                            temp.data.push(0);
                        }
                    });
                    v_list.push(temp);

                });

            }

            const option = {
                legend: {
                    icon: "circle",
                    top: 12,
                    textStyle: {
                        color: '#fff', // 设置图例字体颜色为白色
                        fontSize: 12,
                    }
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow' // 设置为阴影
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [...dept_list],
                    axisLabel: {
                        color: "white",
                        rotate: 45,
                        fontSize: 12,
                        formatter: function (value) {
                            if (value.length > 5) {
                                return value.substring(0, 6) + '...'; // 只显示前10个字符并添加省略号
                            } else {
                                return value;
                            }
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            type: 'dashed',
                            opacity: 0.3
                        },
                    }
                },
                series: [...v_list]
            }
            this.createChart('stuNum', option);
        },
        async excellentGraduateChart() {
            let grade_list = [];
            let count_list = [];
            let res = await countGoodBiyeGradeStu();
            if (res.code == 200) {
                let data = [...res.data];
                data.map(x => {
                    grade_list.push(x.gradeName);
                    count_list.push(x.stuCount);
                });
            }
            const option = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [...grade_list],
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            type: 'dashed',
                            opacity: 0.3
                        },
                    }
                },
                series: [
                    {
                        type: 'bar',
                        stack: 'total',
                        color: "#5FD5EC",
                        label: {
                            show: true,
                            position: 'top',
                            color: "#fff"
                        },
                        data: [...count_list]
                    }
                ]
            }
            this.createChart('excellentGraduate', option);
        },
        collegeLeaveChart() {
            const option = {
                legend: {
                    icon: "circle",
                    data: ['电信院', '艺术院', '汽车学院'],
                    top: 12,
                    textStyle: {
                        color: '#fff', // 设置图例字体颜色为白色
                        fontSize: 12,
                    }
                },
                grid: {
                    left: '2%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['2020', '2021', '2022'],
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            type: 'dashed',
                            opacity: 0.3
                        },
                    }
                },
                series: [
                    {
                        name: '电信院',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '艺术院',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '汽车学院',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            }
            this.createChart('collegeLeaveDistribution', option);
        },
        punishmentChart() {
            const option = {
                legend: {
                    icon: "circle",
                    bottom: 0,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 14
                    },
                },
                radar: {
                    indicator: [
                        { name: '迟到', color: '#fff' },
                        { name: '晚归', color: '#fff' },
                        { name: '缺课', color: '#fff' },
                        { name: '逃课', color: '#fff' },
                        { name: '未归', color: '#fff' },
                    ],
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255,0.1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    },
                    splitArea: {
                        areaStyle: {
                            opacity: 0.7
                        }
                    }
                },
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                value: [4200, 3000, 20000, 35000, 50000, 18000],
                                name: '班级',
                                symbol: 'none',
                                areaStyle: {
                                    color: "#5470C6",
                                    opacity: 0.2
                                }
                            },
                            {
                                value: [5000, 14000, 28000, 26000, 42000, 21000],
                                name: '个人',
                                symbol: 'none',
                                areaStyle: {
                                    color: "#91CC75",
                                    opacity: 0.2
                                }
                            }
                        ]
                    }
                ]
            };
            this.createChart('punishment', option);
        },
        async judgeBestChart() {
            let grade_list = [];
            let gender_list = [];
            let v_list = [];

            let res = await countGoodGradeStu();
            if (res.code == 200) {

                let data = [...res.data];
                let temp1 = groupBy(data, x => x.gender);
                let temp2 = groupBy(data, y => y.gradeName);

                for (let key in temp1) {
                    gender_list.push(key.replace("\"", '').replace('"', ''));
                }

                for (let key in temp2) {
                    grade_list.push(key.replace("\"", '').replace('"', ''));
                }

                gender_list.map(y => {

                    let temp = {
                        name: y,
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        symbol: 'none',
                        color: this.getRandomColor(),
                        data: []
                    };

                    grade_list.map(x => {

                        let v_data = data.filter(z => z.gradeName == x && z.gender == y);

                        if (!isEmpty(v_data)) {
                            temp.data.push(v_data[0].stuCount);
                        } else {
                            temp.data.push(0);
                        }
                    });
                    v_list.push(temp);

                });


            }
            console.log(v_list);

            const option = {
                legend: {
                    icon: "circle",
                    data: [...gender_list],
                    top: 12,
                    textStyle: {
                        color: '#fff', // 设置图例字体颜色为白色
                        fontSize: 12,
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                    data: [...grade_list]
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: '#ffffff',
                            type: 'dashed',
                            opacity: 0.3
                        },
                    },
                    axisLabel: {
                        color: "white",
                        fontSize: 12,
                    },
                },
                series: [
                    ...v_list
                ]
            }
            this.createChart('judgeBest', option);
        },
        async lakeStarChart() {
            let grade_list = [];
            let count_list = [];
            let res = await countLakeGradeStu();
            if (res.code == 200) {
                let data = [...res.data];
                data.map(x => {
                    grade_list.push(x.gradeName);
                    count_list.push(
                        {
                            name: x.gradeName,
                            value: x.stuCount
                        }
                    );
                });
            }
            const option = {
                legend: {
                    data: [...grade_list],
                    orient: "orient",
                    top: 'center',
                    right: 20,
                    icon: "circle",
                    textStyle: {
                        color: '#fff', // 设置图例字体颜色为白色
                        fontSize: 12,
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ["45%", "50%"],
                        avoidLabelOverlap: false,
                        color: ['#5470C6', '#91CC75', '#EE6666'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            ...count_list
                        ]
                    }]

            }
            this.createChart('lakeStar', option);
        },
        handleResize() {
            this.$echarts.getInstanceByDom(document.getElementById('stuNum')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('excellentGraduate')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('collegeLeaveDistribution')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('punishment')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('judgeBest')).resize();
            this.$echarts.getInstanceByDom(document.getElementById('lakeStar')).resize();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = nowTime(new Date(), 'HH: mm: ss')
                this.dateYear = nowTime(new Date(), 'yyyy-MM-dd')
                this.dateWeek = this.weekday[new Date().getDay()]
            }, 1000)
        },
    }
}
</script>

<style lang="scss" scoped>
.big {
    margin: 0px;
    background: url("~@/assets/big/bg.png") no-repeat;
    background-size: 100% 100%;
    min-height: 100vh;
    width: 100%;
    color: white;
    padding-bottom: 50px;

    .head {
        display: flex;
        padding: 10px 20px;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
            color: #45A2FF;
        }

        .time span {
            color: white;
        }

        div:nth-child(2) {
            font-size: 44px;
            font-weight: bold;
        }

        .exit {
            background: url("~@/assets/big/button.png") no-repeat;
            background-size: 100% 100%;
            width: 81px;
            height: 36px;
            cursor: pointer;
            text-align: center;
            line-height: 36px;
        }
    }

    .echarts {
        display: flex;
        padding: 20px;

        .left {
            flex: 1;
        }

        .right {
            flex: 1;
        }

        .center {
            flex: 1.2;

            .college {
                height: 480px;

                .echart-title {
                    margin-top: 20px;
                }
            }

            .campus {
                height: 490px;

                .echart-title {
                    margin-top: 20px;
                }
            }

            .college-list {
                display: flex;
                flex-wrap: wrap;
                font-size: 14px;
                margin-top: 35px;
                margin-left: 25px;

                .item {
                    width: 25%;
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 10px;

                    span:last-child {
                        color: #45A2FF;
                        font-weight: bold;
                        font-size: 25px;
                        margin-top: 10px;
                    }
                }
            }

            .campus-list {
                display: flex;
                padding-right: 20px;

                .left {
                    flex: 1;

                    &>div {
                        background-color: #0C2F6E;
                        height: 90px;
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        margin-top: 20px;
                        font-weight: lighter;
                        border-radius: 10px;

                        span:first-child {
                            color: #a5a4a4;

                        }

                        .total {
                            font-weight: bold;
                            font-size: 22px;
                            margin-top: 8px;
                        }
                    }
                }

                .right {
                    flex: 2;

                    &>div {
                        background-color: #0C2F6E;
                        margin-left: 30px;
                        height: 90px;
                        text-align: center;
                        border-radius: 10px;
                        margin-top: 20px;
                        display: flex;
                        align-items: center;
                        font-weight: lighter;
                        padding: 0 20px;
                        justify-content: space-between;

                        &>span:first-child {
                            color: #a5a4a4;

                        }

                        .rate {

                            span:first-child {
                                font-weight: bold;
                                font-size: 22px;
                            }

                            span:last-child {
                                color: #279279;
                                margin-left: 10px;
                                font-size: 14px;
                            }

                            span:last-child:before {
                                content: "";
                                display: inline-block;
                                width: 0;
                                height: 0;
                                border-left: 5px solid transparent;
                                border-right: 5px solid transparent;
                                border-top: 6px solid #279279;
                                margin-right: 3px;
                            }
                        }
                    }
                }
            }
        }



        .echart {
            background: url("~@/assets/big/border-left-one.png") no-repeat;
            background-size: 100% 100%;
            height: 320px;
            padding: 30px 10px 0 30px;
            box-sizing: border-box;

            #stuNum,
            #excellentGraduate,
            #collegeLeaveDistribution,
            #punishment,
            #judgeBest,
            #lakeStar {
                height: 82%;
                width: 95%;
            }

            .echart-title {
                border-left: 5px solid #45A2FF;
                padding-left: 5px;
                margin-left: 5px;
                font-size: 1.2rem;
            }

            &>div:last-child {
                height: 80%;
            }
        }

    }
}
</style>